//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

body {
    height: 100%;
}

.loginpage {
    display: flex;
    height: 100%;

    .loginpage-logo {
        position: absolute;
        top: 30px;
        right: 30px;
        width: 120px;
    }

    .loginpage-left {
        display: none;
    }

    .loginpage-right {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-around;

        .loginpage-formwrapper {
            width: 300px;
            margin: 0 auto;

            // Form
            .loginpage-form {
                .alert {
                    display: none;
                }

                .btn {
                    border-radius: 40px;
                }

                // Form label + input
                .form-group {
                    width: 100%;

                    label {
                        margin-bottom: 10px;
                        font-size: 14px;
                        font-weight: 500;
                    }

                    .inputwrapper {
                        position: relative;
                        width: 100%;

                        .glyphicon:before {
                            -webkit-transition: color 0.4s;
                            -moz-transition: color 0.4s;
                            -o-transition: color 0.4s;
                            transition: color 0.4s;
                        }

                        .glyphicon-eye-close,
                        .glyphicon-user {
                            position: absolute;
                            top: 50%;
                            left: 15px;
                            -webkit-transform: translateY(-50%);
                            -moz-transform: translateY(-50%);
                            -ms-transform: translateY(-50%);
                            -o-transform: translateY(-50%);
                            transform: translateY(-50%);
                        }

                        input {
                            display: block;
                            width: 100%;
                            height: 48px;
                            padding: 0 10px 0 45px;
                            -webkit-transition: border 0.3s;
                            transition: border 0.3s;
                            color: #333333 !important;
                            border: 1px solid $gray-primary;
                            border-radius: 4px;
                            outline: none;
                            background-color: #FFFFFF !important;

                            &:focus {
                                border: 1px solid $brand-primary;
                            }

                            &:-webkit-autofill,
                            &:-webkit-autofill:hover,
                            &:-webkit-autofill:focus {
                                -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset;
                                -webkit-text-fill-color: #333333;
                            }
                        }

                        input:focus ~ .glyphicon:before {
                            color: $brand-primary;
                        }
                    }
                }

                // Divider - only on login-with-sso.html
                .loginpage-alternativelabel {
                    display: flex;
                    align-items: center;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    justify-content: space-between;
                    margin: 25px 0px;

                    hr {
                        flex: 1;
                        margin: 20px 0 20px 10px;
                        border: 0;
                        border-color: #D8D8D8;
                        border-top: 1px solid #EEEEEE;
                    }
                }

                .loginpage-signin {
                    color: #555555;
                }
            }
        }
    }
}

// Show only on wide screens
@media screen and (min-width: $screen-lg) {
    .loginpage {
        .loginpage-logo {
            width: 150px;
        }

        .loginpage-left {
            position: relative;
            display: block;
            flex: 1;
            width: 100%;
            height: 100%;

            // Image and clipping mask
            .loginpage-image {
                height: 100%;
                animation: makePointer 1s ease-out both;
                background: left / cover no-repeat url("../../../resources/work-do-more.jpeg"); // Microsoft EDGE
                background: left / cover no-repeat linear-gradient(to right, rgba($brand-primary, 0.9) 0%, rgba($brand-primary, 0.6) 100%), left / cover no-repeat url("../../../resources/work-do-more.jpeg");
                background: left / cover no-repeat -moz-linear-gradient(left, rgba($brand-primary, 0.9) 0%, rgba($brand-primary, 0.6) 100%), left / cover no-repeat url("../../../resources/work-do-more.jpeg");
                background: left / cover no-repeat -webkit-gradient(linear, left bottom, right bottom, color-stop(0%, rgba($brand-primary, 0.9)), color-stop(100%, rgba($brand-primary, 0.6))), left / cover no-repeat url("../../../resources/work-do-more.jpeg");
                background: left / cover no-repeat -webkit-linear-gradient(left, rgba($brand-primary, 0.9) 0%, rgba($brand-primary, 0.6) 100%), left / cover no-repeat url("../../../resources/work-do-more.jpeg");
                background: left / cover no-repeat -o-linear-gradient(left, rgba($brand-primary, 0.9) 0%, rgba($brand-primary, 0.6) 100%), left / cover no-repeat url("../../../resources/work-do-more.jpeg");
                background: left / cover no-repeat -ms-linear-gradient(left, rgba($brand-primary, 0.9) 0%, rgba($brand-primary, 0.6) 100%), left / cover no-repeat url("../../../resources/work-do-more.jpeg");
                -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 50%, 100% 100%, 0% 100%);
                clip-path: polygon(0% 0%, 100% 0, 100% 50%, 100% 100%, 0% 100%);
            }
        }

        .loginpage {
            .loginpage-formwrapper {
                width: 400px;
            }
        }
    }
}

// Animate image clipping mask
@keyframes makePointer {
    100% {
        -webkit-clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%);
    }
}
@-webkit-keyframes makePointer {
    100% {
        -webkit-clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%);
    }
}
